<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>S.Resizable Demo</title>
    <link rel="stylesheet" href="/kissy/src/css/assets/dpl/base.css"/>
    <link rel="stylesheet" href="demo/resizable.css"/>
    <style>
        #t, #t2, #t3 {
            position: absolute;
        }

        .ks-resizable-proxy {
            border: 1px dashed #426FD9;
            position: absolute;
        }
    </style>
</head>
<body>
<div style="width:900px;margin: 20px auto;text-align: center;">
    <h1>resizable测试</h1>

    <div style="border:1px solid red;width:200px;
    height:100px;overflow:hidden;top:100px;"
         id="t">
        <button id="destroy" style='margin-top:50px;'>
            destroy resize
        </button>
    </div>


    <div style="border:1px solid red;width:200px;
    height:100px;overflow:hidden;top:500px;"
         id="t2">
        <button id="destroy2" style='margin-top:50px;'>
            destroy preserveRatio resize
        </button>
    </div>

    <div style="border:1px solid red;width:200px;
    height:100px;overflow:hidden;top:700px;"
         id="t3">
        <button id="destroy3" style='margin-top:50px;'>
            destroy proxy resize
        </button>
    </div>
</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("node,resizable,resizable/plugin/proxy", function (S, Node, Resizable, ResizableProxyPlugin) {
        var r = new Resizable({
            node: "#t",
            handlers: ["b", "t", "r", "l", "tr", "tl", "br", "bl"],

            // optional configs
            minHeight: 50,
            minWidth: 50,
            maxHeight: 500,
            maxWidth: 500
        });
        Node.one("#destroy").on("click", function () {
            r.destroy();
        });

        var r2 = new Resizable({
            node: "#t2",
            handlers: ["b", "t", "r", "l"],
            preserveRatio: true,
            // optional configs
            minHeight: 50,
            minWidth: 50,
            maxHeight: 500,
            maxWidth: 500
        });
        Node.one("#destroy2").on("click", function () {
            r2.destroy();
        });

        var r3 = new Resizable({
            node: "#t3",
            plugins: [new ResizableProxyPlugin({
                destroyOnEnd:true,
                hideNodeOnResize:true
            })],
            handlers: ["b", "t", "r", "l", "tr", "tl", "br", "bl"],
            // optional configs
            minHeight: 50,
            minWidth: 50,
            maxHeight: 500,
            maxWidth: 500
        });
        Node.one("#destroy3").on("click", function () {
            r3.destroy();
        });
    });
</script>
</body>
</html>